@import '_var';
.title{
    .container{
        position: relative;
        padding-top: 30px;
        padding-bottom: 60px;
        .bigtitle{
            @include fontBase(30,gray);
            width:100%;
            height: 100px;
            line-height: 100px;
            border-bottom: 1px solid transparent;
            border-color: map-get($map: $color, $key: lightgray);
            position: relative;
            &::after{
                content: "";
                width: 25%;
                height: 0;
                border-bottom: 1px solid map-get($map: $color, $key: gray);
                position: absolute;
                left: 375px;
                bottom: -1px;
            } 
        }
        .smalltitle{
            width: 115px;
            height: 24px;
            line-height: 24px;
            background-color: map-get($map: $color, $key: white);
            @include fontBase(18,gray);
            position: absolute;
            bottom: 50px;
            left: 457px;
        }
        .gray{
            @include bgc;
        }
    }
}
.desc{
    .container{
        // width: 1000px;
        // height: 683px;
        background: url(../images/brand/brand_mask1.png) no-repeat;
        background-size: contain;
        margin-bottom: 30px;
        pre{
            line-height: 30px;
            @include fontBase(12,gray);
            background-color: transparent;
            border: none;
            margin-bottom: 60px;
        }
        .introducebox{
            width: 170px;
            height: 195px;
            margin-left: 45px;
            border: 1px solid map-get($map: $color, $key: gray);
            position: relative;
            p{
                @include fontBase(18,deepgray);
                margin-top: 55px;
                &:last-child{
                    @include fontBase(24,deepgray);
                    width: 60px;
                    height: 55px;
                    margin:  0 auto;
                    border-bottom: 3px solid map-get($map: $color, $key: gray);
                }
            }
        }
        .centertext{
            @include fontBase(12,gray);
            margin-top: 40px;
            line-height: 30px;
            text-indent: 25px;
        }
    }
}
.video{
    .container{
        .videobox{
            width: 998px;
            height: 730px;
            border: 1px solid map-get($map: $color, $key: gray);
            .videoself{
                // width: 971px;
                // height: 707px;
                margin-top: 10px;
                margin-left: 10px;
                img{
                    width: 971px;
                    height: 707px;
                }
            }
        }
    }
}
.probox{
    margin-top: 80px;
    .container{
        .introducebox{
            width: 170px;
            // height: 195px;
            // margin-left: 45px;
            margin: 0 auto;
            border: 1px solid map-get($map: $color, $key: gray);
            position: relative;
            margin-top: 80px;

            p{
                @include fontBase(18,deepgray);
                margin-top: 55px;
                &:last-child{
                    @include fontBase(24,deepgray);
                    width: 60px;
                    height: 55px;
                    margin:  0 auto;
                    border-bottom: 3px solid map-get($map: $color, $key: gray);
                    white-space:nowrap;
                }
            }
            .textcenter{
                text-indent: -15px;
            }
        }
        .mask2{
            background: url(../images/brand/brand_mask2.png)no-repeat;
            background-size: cover;
        }
        .mask3{
            background: url(../images/brand/brand_mask3.png)no-repeat;
            background-size: cover;
        }
        img{
            width: 500px;
            height: 366px;
        }
        .proboxinfobox{
            // width: 170px;
            // height: 195px;
            margin: 150px auto 0;
            p{
                @include fontBase(18,deepgray);
                &:last-child{
                    @include fontBase(12,deepgray);
                    line-height: 30px;
                }
            }
            
        }
        
    }
}
.firstbox{
    .container{
        .introducebox{
            margin-top: 100px;
        }
        .firsttext{
            @include fontBase(12,gray);
            line-height: 30px;
            text-indent: 25px;
        }
    }
    
}
@each $key in map-keys($viewports){
    @media (min-width: map-get($viewports, $key) )and(max-width:991px) {
        .container {
            width: map-get($viewports, $key);
        }
        @if $key<=4 {
            .probox .container .proboxinfobox{
                margin-top: 10px;
            }
            .probox{
                margin-top: 10px;
            }
        }
        @if $key==4 {
            .title .container .smalltitle{
                left: 43%;
            }
        }
        @if $key==2 {
            .title .container .smalltitle{
                left: 35%;
            }
        }
        @if $key==1 {
            .title .container .bigtitle::after{
                left: 37.5%;
            }
            .title .container .smalltitle{
                left: 32%;
            }
        }
    }
}